<template>
  <div class="member">
    <el-dialog
      title="选择部门"
      v-model="dialogTransfer"
      width="450px"
      append-to-body
      :close-on-click-modal="false"
      @close="closeDialogTransferClick"
    >
      <div class="treeBox">
        <!-- @node-click="handleNodeClick" -->
        <el-tree :data="deptDatas" :load="getDeptDatas" :props="defaultProps" :expand-on-click-node="false" lazy>
          <template #default="{ node, data }">
            <span class="treeSpan" @dblclick="handleNodeDblClick(node, data)">
              <i class="el-icon-office-building icon_user"></i>
              {{ data.deptName }}
            </span>
          </template>
        </el-tree>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang='ts'>
import { apiuDeptQueryFreePerm } from '@/api/know/wikiApps/indexApi';
const emit = defineEmits(['handleNodeDblClick']);
const memberLoading = ref(false);
const dialogTransfer = ref(false);
const deptDatas = ref([]);
const deptPersonList = ref([]);
const defaultProps = ref({ children: 'children', label: 'name', isLeaf: 'leaf' });
const deptLoading = ref(false);
// 获取左侧部门数据
const getDeptDatas = (node: any, resolve: any) => {
  const sort = 'id,desc';
  const params = { sort: sort };
  if (typeof node !== 'object') {
    if (node) {
      params['name'] = node;
    }
  } else if (node.level !== 0) {
    console.log(222);
    
    params['parentId'] = node.data.deptId;
  }
  setTimeout(() => {
    apiuDeptQueryFreePerm(params).then((res: any) => {
      res.data.forEach((item) => {
        item.deptId = item.deptId;
        item.perm = 0;
      });
      if (resolve) {
        resolve(res.data);
      } else {
        deptDatas.value = res.data;
      }
    });
  }, 100);
};
// 双击树
const handleNodeDblClick = (node: any, data: any) => {
  emit('handleNodeDblClick', data);
  closeDialogTransferClick();
};
// 关闭成员穿梭框
const closeDialogTransferClick = () => {
  dialogTransfer.value = false;
  memberLoading.value = false;
};
defineExpose({
  dialogTransfer
})
</script>
<style scoped lang='scss'>
::v-deep .el-dialog__body {
  padding: 0 20px 20px;
}
.treeSpan{
  display: inline-block;
  width: 100%;
}
.icon_user {
  color: #36a3f7;
}
.treeBox{
  height: 400px;
  overflow: auto;
}
</style>
